<script setup lang="ts">
import {onMounted, ref} from "vue";
import indexApi from '@/api/index.ts'

const attentionList = ref<any>([])
const isLoading = ref(false)
onMounted(async()=>{
  isLoading.value = true
  const result = await indexApi.getRecommendUser()
  if (result.code == 200) {
    attentionList.value = result.data
  }
  isLoading.value = false
})
// 关注按钮
const clickAttentionHandle =async (id:number,isAttention:boolean) => {
  const result = await indexApi.attentionUser(id,isAttention)
  if (result.code == 200) {
    attentionList.value.forEach((item:any) => {
      if (item.id == id) {
        item.isAttention = isAttention
      }
    })
  }
}
const detail = ref<any>([])
// 是否展示用户信息
const isShowUserDetail = ref(false)
const showDetail = (id:number) => {
  isShowUserDetail.value = true
  detail.value = attentionList.value.filter((v:any) => v.id == id);
}
</script>

<template>
  <div class="right-1-2">
    <div class="header">推荐作者</div>
    <div class="content" v-if="!isLoading">
      <div class="item" v-for="( item, index) in attentionList" :key="index">
        <img :src="item.avatar" alt="" class="avatar" v-if="item.avatar">
        <a-avatar size="large" v-else>
          <template #icon><UserOutlined /></template>
        </a-avatar>
        <div class="info">
          <div class="name" @click="showDetail(item.id)">{{item.nickname}}</div>
          <div class="title">{{item.position}}</div>
        </div>
        <a-button size="small"
                  :type="item.isAttention ? 'text' : 'primary'"
                  @click="clickAttentionHandle(item.id,!item.isAttention)">{{ item.isAttention ? '已关注' : '关注'}}</a-button>
      </div>
    </div>
    <div v-else style="height: 100%;width: 100%;display: flex;justify-content: center;align-items: center">
      <a-spin></a-spin>
    </div>
<!--    详细框-->
    <a-modal v-model:open="isShowUserDetail">
      <template #footer></template>
      <div class="user-detail">
        <img :src="detail[0].avatar || '/src/assets/avatar.jpg'" alt="" class="avatar">
        <div class="middle">
          <div class="nickname">{{ detail[0].nickname }}</div>
          <div class="position">{{ detail[0].position }}</div>
          <div class="middle_bottom">
            <div class="article">
              <span>文章</span>
              <span class="num">{{ detail[0].totalArticleNum }}</span>
            </div>
            <a-divider type="vertical" style="border-color: black"/>
            <div class="attention">
              <span>关注</span>
              <span class="num">{{ detail[0].totalAttentionNum }}</span>
            </div>
            <a-divider type="vertical" style="border-color: black" />
            <div class="fan">
              <span>粉丝</span>
              <span class="num">{{ detail[0].totalFanNum }}</span>
            </div>
          </div>
        </div>
        <div class="right">
          <a-button size="small"
                    :type="detail[0].isAttention ? 'text' : 'primary'"
                    @click="clickAttentionHandle(detail[0].id,!detail[0].isAttention)">{{ detail[0].isAttention ? '已关注' : '关注'}}</a-button>
        </div>
      </div>

      <div class="lastly">
        <div class="header">最近文章</div>
        <div class="item" v-for="(item,index) in detail[0].lastArticle" v-if="detail[0].lastArticle && detail[0].lastArticle.length > 0">
          <div class="title">{{item.title}}</div>
          <div class="time">{{ item.createTime }}</div>
        </div>
        <a-empty v-else description="该用户近期未发布文章" style="height: 100px"/>
      </div>
    </a-modal>
  </div>
</template>
<style scoped lang="scss">
.right-1-2{
  .header{
    margin-bottom: 5px;
    font-size: 17px;
  }
  .content{
    display: flex;
    flex-direction: column;
    gap: 10px;
    .item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      transition: all .3s;
      cursor: pointer;
      &:hover{
        background-color: rgb(245, 247, 250);
        transition: all .3s;
      }
      .avatar{
        border-radius: 50%;
        width: 15%;
        aspect-ratio: 1/1;
        margin-right: 10px;
      }
      .info{
        flex: 1;
        .name{
          font-size: 15px;
          overflow : hidden;
          text-overflow: ellipsis;//当对象内文本溢出时显示省略标记
          display: -webkit-box;
          -webkit-line-clamp:1;//这边的2指的是两行
          -webkit-box-orient: vertical;
        }
        .title{
          color: rgb(176, 180, 188);
        }
      }
    }
  }

}
.user-detail{
     display: flex;
     align-items: center;
     gap: 10px;
     .avatar{
       border-radius: 50%;
       height: 80px;
       aspect-ratio: 1/1;
     }
     .nickname{
       font-size: 16px;
       font-weight: 100;
       color: black;
     }
     .middle{
       flex:1;
       color: rgb(139, 144, 155);
       .middle_bottom{
         display: flex;
         align-items: center;
       }
     }
   }
.lastly{
  margin-top: 10px;
  .header{
    font-size: 16px;
  }
  .item{
    margin-left: 10px ;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    cursor: pointer;
    &:hover{
      background-color: rgb(226, 227, 228);
    }
  }
}
</style>
